<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/axios.min.js"></script>
    <script src="/js/util.js"></script>
    <script>
        window.onload =function (){
            findGrade()
        }

        function findGrade(){
            axios.get("/grade/findAll",null).then(e=>{
                var info = e.data;
                var str ="";
                str+=`<div style="display: flex">`
                for (var i=0;i<info.length;i++){
                    str+=`<input type='checkBox' name="gradeArray" value="${info[i].id}">${info[i].name}`
                }
                $("gradeDiv").innerHTML = str;
            });
        }


        function getItem(){
            var idArray = [];
            var boxList = document.querySelectorAll(
                "#gradeDiv [name='gradeArray']:checked"
            );
            for (var i=0;i<boxList.length;i++){
                idArray.push(boxList[i].value);
            }
            return idArray;
        }

        function addRole(){
            var params = new URLSearchParams();
            params.append("name",$("name").value);
            params.append("gradeArray",getItem());
            axios.post("/role/add",params).then(e =>{
                if (e.data =="ok"){
                    location.href="/role/role.html"
                }
            })
        }
    </script>
</head>
<body>
<h2>添加角色</h2>
角色名称:<input type="text" id="name"><br>
拥有权限:<div id="gradeDiv" onclick="getItem()"><br>
</div>
<input type="button" value="添加" onclick="addRole()">

</body>
</html>